<script setup lang="ts">
import { reactive, ref, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import AssetTab from './components/asstInfo/assetTab.vue'
import HostNameTab from './components/asstInfo/domTab.vue'
import WhoisTab from './components/asstInfo/whoisTab.vue'
import CertificateTab from './components/asstInfo/certificateTab.vue'
import OrgTab from './components/asstInfo/orgTab.vue'
import LoopholeTab from './components/asstInfo/loopholeTab.vue'
import MoreTab from './components/asstInfo/moreTab.vue'
import assetBase from './components/asstInfo/compent/assetBase.vue'
import AssetLoopDetails from './components/asstInfo/compent/asset-loop-details.vue'
const route = useRoute()

const id = ref(`${route.params.id}`)
const activeName = ref('asset')
const detailsRef = ref()
const drawer = ref(false)
const infodata=reactive({
  Message:{}
})
// 资产调查
const open = () => { }
// 详细点击事件
const DetailItem = (item: object) => {
  drawer.value = true
  infodata.Message = item
}
</script>

<template>
  <div class="jm-container flex jm-mainbox">
    <div class="info-view">
      
      <jm-tabs type="border-card">
        <jm-tab-pane label="基本信息">
          <assetBase :id="id"></assetBase>
        </jm-tab-pane>
        <!-- <jm-tab-pane label="组件详情" class="tag">组件详情</jm-tab-pane> -->
      </jm-tabs>

    </div>

    <div class="tab-view jm-bg-color">
      <jm-tabs v-model="activeName">
        <jm-tab-pane :label="`资产测绘`" name="asset">
          <AssetTab v-if="activeName === 'asset'" v-model:id="id" />
        </jm-tab-pane>
        <jm-tab-pane :label="`域名解析`" name="host">
          <HostNameTab v-if="activeName === 'host'" v-model:id="id" />
        </jm-tab-pane>
        <jm-tab-pane :label="`whois`" name="whois">
          <WhoisTab v-if="activeName === 'whois'" v-model:id="id" />
        </jm-tab-pane>
        <jm-tab-pane :label="`数字证书`" name="certificate">
          <CertificateTab v-if="activeName === 'certificate'" v-model:id="id" />
        </jm-tab-pane>
        <!-- <jm-tab-pane :label="`组织机构`" name="org">
          <OrgTab v-if="activeName === 'org'" v-model:id="id" />
        </jm-tab-pane> -->
        <jm-tab-pane :label="`漏洞信息`" name="LoopholeTab">
          <LoopholeTab v-if="activeName === 'LoopholeTab'" v-model:id="id" @detailItem="DetailItem"/>
        </jm-tab-pane>
        <!-- <jm-tab-pane :label="`更多`" name="more">
          <MoreTab v-if="activeName === 'more'" v-model:id="id" />
        </jm-tab-pane> -->
      </jm-tabs>
        <!-- 详细页抽屉 -->
      <jm-drawer v-model="drawer" title="I am the title" :with-header="false">
        <AssetLoopDetails ref="detailsRef" :infoData="infodata.Message"></AssetLoopDetails>
      </jm-drawer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.jm-container {
  flex-direction: column;
  padding: 0;

  .info-view {
    width: 100%;
  }

  .tab-view {
    padding: 0.625rem 1.25rem;
    margin-top: 0.5rem;
    min-height: 12.5rem;
  }
}
</style>
